<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1(){

            var body=document.getElementById("b");
            var a1=document.getElementById("a1");


            // var obj=document.createElement("div");
            // var text=document.createTextNode("Hello");

            // obj.appendChild(text);

            // body.insertBefore(obj,a1);

            // body.appendChild(obj);

            // body.replaceChild(obj,a1);

            // body.removeChild(a1);

            // a1.remove();

            // body.innerHTML=body.innerHTML+"<div>Hello</div>";
            // body.innerHTML="<div>Hello</div>"+body.innerHTML;
            // body.innerHTML="<div>Hello</div>";
            body.innerHTML="";
        }

        function addRow(){
            var t=document.getElementById("t");
            var nameInput=document.getElementById("name");
            var salaryInput=document.getElementById("salary");

            var name=nameInput.value;
            var salary=salaryInput.value;

            console.log(name,salary);


            // t.innerHTML=t.innerHTML+"<tr>"
            //                        +"    <td>"+name+"</td>"
            //                        +"    <td>"+salary+"</td>"
            //                        +"    <td>"
            //                        +"        <a href='javascript:;' onclick='rm(this);'>删除</a>"
            //                        +"    </td>"
            //                         +"</tr>";


            //创建tr标签 参考13行
            var trObj=document.createElement("tr");
            //创建td标签 参考13行
            var nameTdObj=document.createElement("td");
            //创建td标签 参考13行
            var salaryTdObj=document.createElement("td");
            //创建td标签 参考13行
            var deleteTdObj=document.createElement("td");
            //创建name文本 参考14行
            var nameText=document.createTextNode(name);
            //创建salary文本 参考14行
            var salaryText=document.createTextNode(salary);
            //第一td中追加name文本 参考16行
            nameTdObj.appendChild(nameText);
            //第二td中追加salary文本 参考16行
            salaryTdObj.appendChild(salaryText);
            //创建a标签 参考13行
            var aObj=document.createElement("a");
            //a标签设置属性href，值javascript:;
            aObj.href="javascript:;";
            // aObj.setAttribute("href","javascript:;");
            // var hrefAttr=document.createAttribute("href");
            // hrefAttr.value="javascript:;";
            // aObj.setAttributeNode(hrefAttr);
            aObj.onclick=function(){
                rm(this);
            };
            //创建删除文本 参考14行
            var deleteText=document.createTextNode("删除");
            //a标签中追加删除文本 参考16行
            aObj.appendChild(deleteText);
            //第三td中追加a标签 参考16行
            deleteTdObj.appendChild(aObj);
            //tr中追加三个td 参考16行
            trObj.appendChild(nameTdObj);
            trObj.appendChild(salaryTdObj);
            trObj.appendChild(deleteTdObj);
            //t中追加tr 参考16行
            t.appendChild(trObj);

        }



        function rm(deleteA){
            if(confirm("确认是否删除？")){
                deleteA.parentNode.parentNode.remove();
            }
        }
    </script>
</head>
<body id="b">
    <a id="a1" href="javascript:;" onclick="f1();">test</a>

    <hr/>



    <table id="t" border="1" width="60%" bgcolor="#cccccc">
        <tr>
            <th>姓名</th>
            <th>工资</th>
            <th>删除</th>
        </tr>


    </table>

    姓名：<input type="text" id="name"/><br/>
    工资：<input type="text" id="salary"/><br/>
    <input type="button" value="添加" onclick="addRow();"/>





























</body>
</html>